前言

上一篇文章我們提到了如何用 CSS 屬性在網頁 2D 空間內移動變化，但是你以為這樣就夠了嗎？ NoNoNo～ 既然在網頁上有 2D 空間的變化，當然也有 3D 空間的變化囉～

今天就讓我們來好好聊聊如何在網頁上讓元素看起來更有立體感吧！

簡介

通常來說，元素是渲染在平面上並且和畫面佈局的 疊層上下文 為同一平片。
而對於網頁來說，可以將 3D 變化視為一種建立在 2D 平面上的繪圖效果，好讓 2D 元素看起來像是 立體的 3D 元素。

舉例來說：給予元素數值使其在 Ｚ軸 上移動，會讓元素看起來有放大縮小的效果(物體與攝影框的遠近距離關係，但並不會因此讓元素的圖層位置變換。

Perspective 透視

既然有了三維空間的產生，我們就可以來 透視 元素啦！

所謂的透視指的是什麼呢？透視在繪畫技法內通常被稱作 遠近法，即是 為了呈現物體遠近距離感 的構圖技巧，距離視角近的物體要畫的大一點，距離視角遠的物體要畫小一點。

圖片來源：三维图像投影变换——透视投影

而 W3C 內則解釋：

在上方第一張圖中，Z 的距離為 d 距離的一半。為了使原始的圓形(實線圓形)大小看起來和 Z (虛線圓形)一樣，我們需要將原始圓形放大兩倍，視覺效果才會一樣。

在下方第二張圖中，Z (虛線圓形)按照比例縮小了三分之一，所以在視覺上看起來會像是在原始圓形的後方。

通常我們會以觀看者視角為圖形中心點，所以如果需要，我們可以透過 perspective-origin 來設定視角位置。

如圖所示，當我們調整 perspective-origin 後，就看不到圓形的下半部了。

3D Rendering Contexts

在 3D 渲染的環境中，3D 元素的渲染是建立在 root 跟元素上，元素與根元素的關係被認為是共享同一個三維座標系統。在 3D 渲染上下文中的元素是由前往後渲染的，而其渲染的位置取決於元素在三維空間中的 Z軸 位置，並且要是對這些 3D 元素 進行轉換，導致元素相交，則他們會以相交的方式進行渲染。

三維空間中的元素渲染與建立方式如下：

• 3D 渲染上下文是由可變形之元素建立而成，該元素的 transfrom-style 預設值為 flat，為了建立三維空間，我們可以將 transfrom-style 值改為 preserve-3d。
• 若是對外層父元素下語法 preserve-3d 則內層子元素同樣也參與三維空間之內，而不是內層子元素也建立一個新的三維空間。

Transform 3D 基礎語法

transforme: Function values(X, Y, Z)

在以下 3D 函數變化中，因瀏覽器支援度問題，保留了 zero 的值，其行為跟，[0deg]值的行為一樣。

matrix3d()

以 4x4 齊次矩陣算法計算 3D Transfrom 轉換值。當我們需要元素同時做到 位移、旋轉、變形 的效果。
參考資料

Translate

透過向量定位 [tx,ty,tz] 來指定 3D Translation 的位置，tx 為 X軸數值 ty 為 Ｙ軸 數值 tz 為 Z軸 數值。

scale3d()

透過向量定位 [sx, sy, sz] 來指定 3D Translation 的縮放。若兩向量的座標相等，則縮放比例是均勻向四周縮放。

rotate3d()

完整語法：

rotate3d(rx, ry, rz, angle)

透過向量定位 [rx, ry, rz] 來指定 3D Translation 的旋轉方向，並透過 [angle] 來指定旋轉角度，這個屬性 使元素沿著固定軸移動 而不會造成變形。
較特別的是，前三個數值是有被嚴格定義的，若前三個值的平方總和相加不等於1，則旋轉無法作用。而 angle 正值代表順時鐘旋轉、負值代表逆時鐘旋轉。

與 2D rotate 相反，3D rotate 的值通常是不能交換的，這意味著我們在給定旋轉軸的順序是非常重要的。

沿著 X軸 旋轉：rotate3d(rx)

沿著 Y軸 旋轉：rotate3d(ry)

沿著 Z軸 旋轉：rotate3d(rz)

perspective()

完整語法：

perspective(length)

perspective 屬性即是指定透視投影的矩陣運算。其讓元素沿著 Ｚ軸 移動。當 Z = 0 時，為元素與觀看者的距離，Z > 0 時該元素的三維空間比正常值大，而 Z < 0 時則比正常的值小

由於過小的 [length] 值會產生奇怪的渲染結果，因此該屬性強調計算數值的準確度，若計算出來的渲染結果值小於 1px，則會被視為 1px。

而若使用 none 值，計算轉換會視為類似於無限的 [length] 值。這樣的值在畫面渲染上看起來會像是平面的。因此，此屬性除了 none 值以外的任何其他值一起使用，將會建立堆疊上下文。就像 2D Transfrom 語法一樣，他也會為後代元素建立 block container。

backface-visibility

上面介紹完 Transfrom 3D 有哪些可以運用的基礎語法後，這邊也要提到一個很特別的語法，稱作 backface-visibility 。

這個屬性即是使該元素 只能從正面看見元素，背面是不可見(被隱藏起來)，所以即便初始狀態是 hidden ，因為沒有翻轉到背面，也看不出來背面是否有被隱藏。

由於影響的是 元素背面，所以在 Transfrom 2D 沒有透視的狀況，是沒有效果的。

元素「2」的背面(紅色區塊)為 visible ，元素「1」調整透明度後即可看見 元素「2」的背面。

元素「2」的背面(紅色區塊)為 hidden(等同於被隱藏起來) ，所以即使元素「1」調整透明度仍然看不見 元素「2」

完整語法：

backface-visibility: (visible|hidden);

visible

背面朝著觀看者時，會顯現出來，並且為正面的鏡射狀態。

hidden

背面朝著觀看者時，會隱藏起來，雖實體仍存在於文檔流中，但可視為元素消失(即該元素變透明看到元素後方的其他元素)。

看到這邊，大家是不是也被 3D 空間的轉換搞得暈頭轉向的呢？
但是，已經沒什麼好害怕的了!因為明天我會帶著各位魔法少女(男)們實際練習一遍魔法召喚，相信大家實做完畢之後，又會朝著魔法少女(男)之路大大地向前邁進了呢！

那麼我們明天見～

參考資料

• W3.org - Transforms Module
• MDN - translate3d()
• oxxostudio - 玩轉 CSS 3D - 原理篇